<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件传值</title>
  <script src="vue.js"></script>
</head>
<body>
<!--子传父-->
<!--handleIncrease  是事件方法-->

<!--step就是3这个参数-->
<!--子组件向父组件触发事件是携带了参数2，父组件执行监听事件的方法里也就会接受到了step这个参数-->

<!--子组件通过事件触发的形式传值-->
<div id="app">
       <counter :count="0" @inc="handleIncrease"></counter>
       <counter :count="3" @inc="handleIncrease"></counter>
      <div>{{total}}</div>
</div>
<script>
//  1.
//  var myComponent = Vue.extend({     Vue.extend()是Vue构造器的扩展  调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。
//    props:['count'],                 Vue.extend()去掉   直接var myComponent = {}也可以
//    data:function () {
//      return {
//        number:this.count
//      }
//    },
//    template:'<div @click="handleClick">{{number}}</div>',
//    methods:{
//      handleClick:function(){
//        this.number =this.number+3;
//        this.$emit('inc',3)    //$emit还可以传参  第一个是事件名 往后是参数   3就是每次增加的数
//      }
//    }
//  }
//2.
  var counter={
  props:['count'],
    data:function () {
    return {
      number:this.count
    }
  },
  template:'<div @click="handleClick">{{number}}</div>',
    methods:{
    handleClick:function(){
      this.number =this.number+3;
      this.$emit('inc',3)    //$emit还可以传参  第一个是事件名 往后是参数   3就是每次增加的数
    }
  }
  }
  var vm=new Vue({
    el:"#app",
    data:{
       total:3
    },
    components:{
        counter:counter         //右边的为变量名    counter换成1. 中的myComponent也行
    },
    methods:{
      handleIncrease:function (step) {
//            alert(aaa)
            this.total+=step
      }
    }
  })
</script>
</body>
</html>
